import React, { Component } from 'react'
import { inject, observer } from "mobx-react";



@inject('todo')
@observer

class Main extends Component {

  
  render() {
		// console.log(this.props)
    const { deleteLists, changeStatus, filterTodo } = this.props.todo
    return (
      <section className="main"> 
				<input className="toggle-all" type="checkbox" />
				<ul className="todo-list">
				  {
						filterTodo.map((todo, index) => (
							<li key={index} className={todo.isCompleted ? 'completed' :  ''}>
								<div className="view">
									<input className="toggle" 
									checked={todo.isCompleted} onChange={env => changeStatus(index, env.target.checked )} 
									type="checkbox" />
									<label>{todo.taskName}</label>
									<button className="destroy" onClick={() => deleteLists(index)}></button>
								</div>
								<input className="edit" />
				  		</li>
						))
					}
				</ul>
			</section>
    )
  }
}


export default Main
